<template>
	<view>
		<view class="content">
			<image class="topBgc" src="/static/recharge/topBgc.png" mode=""></image>
			<view class="container">
				<view class="balance">
					<text>{{balance}}</text>
					<view class="tips">当前多多券（元）</view>
				</view>
				<view class="amount">
					<view class="title">账户充值</view>
					<view class="input">
						￥<text>{{changeMoney || 0}}</text>
					</view>
					<view class="tips">充值金额不能低于100</view>
				</view>
				<view class="amountList">
					<view class="title">
						<text>选择充值金额</text>
						<view class="right">
							<image src="/static/recharge/change.png" mode=""></image>
							<text @click="change">换一批</text>
						</view>
					</view>
					<view class="itemList">
						<view :class="changeIndex == index ? 'activeItem':'item'" v-for="(item,index) in numberList" :key="index" @click="changeItem(item,index)">￥{{item}}</view>
					</view>
				</view>
				<view class="immediately" @click="pay()">立即充值</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'',
				changeMoney:'',
				numberList:[],
				changeIndex:0,
				balance:''
			};
		},
		onLoad(options) {
			if(options.money){
				this.money = options.money
				this.balance = options.balance
				this.getRandom()
			}
		},
		methods:{
			getRandom(){
				//获取充值随机数
				function getRandomNumbersAndSort() {
				    let arr = [];
				    while(arr.length < 12) {
				        let randomNum = Math.floor(Math.random() * 100) + 1;
				        if(!arr.includes(randomNum)) {
				            arr.push(randomNum);
				        }
				    }
				    arr.sort((a, b) => a - b);
				    return arr;
				}
				const numberArr = getRandomNumbersAndSort()
				numberArr.forEach((item)=>{
					item = (Number(this.money) + Number((Math.random() * 10 + item/100))).toFixed(2)// 返回随机数
					this.numberList.push(item)
				})
				this.changeMoney = this.numberList[0]
			},
			change(){
				this.numberList = []
				this.getRandom()
				this.changeIndex = 0
			},
			changeItem(item,index){
				this.changeIndex = index
				this.changeMoney = item
			},
			pay(){
				uni.setStorageSync('money', this.changeMoney)
				uni.navigateTo({
					url: './rechargeType'
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
	}
	.content{
		position: relative;
		.topBgc{
			width: 100%;
			height: 330rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.container{
			position: relative;
			z-index: 100;
			padding: 43rpx 24rpx;
			.balance{
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				text{
					font-weight: 500;
					font-size: 52rpx;
					color: #FFFFFF;
				}
				.tips{
					margin-top: 10rpx;
				}
			}
		
			.amount{
				padding: 27rpx 26rpx;
				background-color: #fff;
				border-radius: 24rpx;
				margin-top: 45rpx;
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #181A1C;
				}
				.input{
					padding: 10rpx 0;
					border-bottom: 1rpx solid #D8D8D8;
					margin: 29rpx 0;
				}
				.tips{
					font-weight: 400;
					font-size: 24rpx;
					color: #E13742;
				}
			}
		
			.amountList{
				padding: 30rpx 26rpx;
				background-color: #fff;
				border-radius: 24rpx;
				margin-top: 27rpx;
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #181A1C;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 29rpx;
					.right{
						display: flex;
						align-items: center;
						image{
							width: 26rpx;
							height: 26rpx;
						}
						text{
							font-weight: 400;
							font-size: 26rpx;
							color: #7E7E7E;
							margin-left: 10rpx;
						}
					}
				}
				.itemList{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;
					.item{
						width: 30%;
						text-align: center;
						background-color: #F7F7F7;
						border-radius: 16rpx;
						line-height: 82rpx;
						margin-top: 20rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #6A6A6A;
					}
					.activeItem{
						width: 30%;
						text-align: center;
						background-color: #04C538;
						border-radius: 16rpx;
						line-height: 82rpx;
						margin-top: 20rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}
			}
		
			.immediately{
				width: 100%;
				line-height: 90rpx;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				background: #04C538;
				border-radius: 50rpx;
				margin-top: 33rpx;
			}
		}
		
	}
</style>
